main {

  /* 图片轮播 */
  .swiper-container {
    width: 100%;
    height: 200px;
    .index-swiper1 {
      // background-image: url(../image/index-swiper-bg1.jpg);
      background: url("../../assets/imgs/index-swiper-bg1.jpg");
      background-position: top center;
      background-size: 500px;
    }
    .index-swiper2 {
      // background-image: url(../image/index-swiper-bg1.jpg);
      background: url("../../assets/imgs/index-swiper-bg2.jpg");
      background-position: top center;
      background-size: 500px;
    }
    .index-swiper3 {
      // background-image: url(../image/index-swiper-bg1.jpg);
      background: url("../../assets/imgs/index-swiper-bg3.jpg");
      background-position: top center;
      background-size: 500px;
    }
  }
  #itemList {
    padding: 10px 15px;
    .list {
      margin-bottom: 10px;
    }
    .row-container {
      /* 行容器 */
      display: flex;
      height: 150px;
      .row-card {
        line-height: 20px;
        opacity: 0.73;
        border-radius: 15px 15px 15px 15px;
      }
      .row-card-ranking {
        /* 今日排名 */
        flex: 2;
        background: url("../../assets/imgs/index-card-rank.png") no-repeat
          -15px 30px;
        background-size: 84%;
        background-color: rgba(21, 146, 204, 100);
        position: relative;
        color: rgba(0, 78, 115, 100);
        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
          color: #005177;
        }
        #rankCount {
          position: absolute;
          left: 12px;
          top: 90px;
          font-size: 50px;
          font-weight: bold;
          color: #fff;
        }
      }
      .row-card-sum {
        /* 累积打卡 */
        flex: 3;
        background: url("../../assets/imgs/index-card-sum.png") no-repeat 10px
          24px;
        background-size: 55%;
        // background-color: rgba(21, 146, 204, 100);
        position: relative;
        color:  #005177 ;
        background-color: rgba(170, 217, 247, 100);
        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
        }

        #checkBtn {
          width: 100px;
          height: 40px;
          border: 3px solid rgba(0, 81, 119, 100);
          font-weight: bold;
          font-family: Arial;
          border-radius: 20px;
          text-align: center;
          line-height: 32px;
          position: absolute;
          left: 90px;
          top: 85px;
        }
      }
    }
    .row-container02 {
      display: flex;
      height: 110px;
      .row-card {
        line-height: 20px;
        opacity: 0.73;
        border-radius: 15px 15px 15px 15px;
      }
      .row-card-data {
        flex: 2;
        background: url("../../assets/imgs/index-card-data.png") no-repeat;
        background-size: cover;
        // background-color: rgba(21, 146, 204, 100);
        position: relative;
        color: rgba(255, 255, 255, 100);
        // background-color: rgba(170, 217, 247, 100);
        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
        }
      }
      .row-card-badge {
        flex: 2;
        background: url("../../assets/imgs/index-card-badge.png") no-repeat 7px
          25px;
        background-size: 55%;
        background-color: rgba(157, 189, 227, 100);
        position: relative;
        color: rgba(0, 81, 119, 100);

        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
        }
        #badgeBtn {
          position: absolute;
          left: 100px;
          top: 53px;
          color: #fff;
          color: rgba(0, 78, 115, 100);
          display: flex;
          #badgeCount {
            font-size: 70px;
            font-weight: bold;
          }
          span {
            position: absolute;
            left: 40px;
            top: 18px;
          }
        }
      }
    }
    .row-container03 {
      display: flex;
      height: 110px;
      .row-card-Course {
        background: url("../../assets/imgs/index-swiper-bg2.jpg") no-repeat 0px -17px;
        background-size: cover;
        position: relative;
        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    .row-container04 {
      display: flex;
      height: 110px;
      .row-card-Course {
        background: url("../../assets/imgs/index-card-run.png") no-repeat 0px -17px;
        background-size: cover;
        position: relative;
        .tilte {
          position: absolute;
          left: 14px;
          top: 15px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }
}
